<script setup>
</script>

<template>
  <div>
    <el-container>
      <el-header>
        <h1>电影</h1>
      </el-header>
      <el-container class="main">
        <el-aside width="200px" class="dh">
          <el-menu>
            <router-link to="/movie" style="text-decoration: none"
              ><el-menu-item index="1"
                ><el-icon><CollectionTag /></el-icon>影片信息</el-menu-item
              ></router-link
            >
            <!-- <router-link to="/cinema"><el-menu-item index="2">影院信息</el-menu-item></router-link> -->
            <router-link to="/buy" style="text-decoration: none"
              ><el-menu-item index="2">
                <el-icon><ShoppingCart /></el-icon>购物车</el-menu-item
              ></router-link
            >
            <router-link to="/order" style="text-decoration: none"
              ><el-menu-item index="3"
                ><el-icon><DocumentCopy /></el-icon>订单管理</el-menu-item
              ></router-link
            >
            <router-link to="/user" style="text-decoration: none"
              ><el-menu-item index="4"
                ><el-icon><User /></el-icon>用户</el-menu-item
              ></router-link
            >
          </el-menu>
        </el-aside>
        <el-main>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  CollectionTag,
  DocumentCopy,
  ShoppingCart,
  User,
} from "@element-plus/icons-vue";
</script>

<style scoped>
.el-header {
  width: 100vw;
  height: 25vh;
  background-color: #409eff; /* 更和谐的蓝色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 柔和的阴影 */
}

.el-header h1 {
  color: #ffffff; /* 白色文字更突出 */
  text-align: center;
  line-height: 15vh; /* 使文字垂直居中 */
}

.dh {
  height: 150vh;
  background-color: #304156; /* 更深的背景色，增加层次感 */
}

.el-menu {
  border-right: none; /* 移除默认边框 */
}

.el-menu-item {
  font-size: 16px; /* 增加字体大小 */
  font-weight: bold; /* 加粗字体 */
  background-color: #f4f4f5; /* 更柔和的背景色 */
  color: #606266; /* 深灰色文字，易于阅读 */
  border-bottom: 1px solid #e6e6e6; /* 添加分隔线 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
}

.el-menu-item:hover {
  background-color: #ecf5ff !important; /* 鼠标悬停时颜色变化 */
  color: #409eff; /* 鼠标悬停时文字颜色变亮 */
}

.el-menu-item.is-active {
  color: #ffffff; /* 白色 */
  background-color: #4bfff3 !important;
  border-left: 4px solid #b3ff40;
}
.router-link {
  text-decoration: none;
}
</style>

